<template>
  <view class="coupon-page">
    <u-field class="ml-36 textarea" v-model="params.name" label-width="220"
             label="优惠券名称" placeholder="请输入优惠券名称"></u-field>
    <view class="plr-36 flex">
      <view class="u-flex-1">
        <view class="flex ptb-10">
          <view>
            优惠券类型
          </view>
          <view class="input ml-30 u-flex-1 ptb-15 plr-20">
            <u-radio-group v-model="params.type">
              <u-radio
                  shape="square"
                  v-for="(item, index) in couponType"
                  :key="index"
                  :name="item.value"
                  :disabled="item.disabled"
              >
                {{ item.name }}
              </u-radio>
            </u-radio-group>
          </view>
        </view>
      </view>
    </view>
    <u-field class="ml-36" v-model="params.money" label-width="220" label="优惠券金额" placeholder="例: 100"></u-field>
    <u-field class="ml-36" v-model="params.num" label-width="220" label="数量" placeholder="请输入数量"></u-field>
    <u-field v-if="params.type==='satisfy'" class="ml-36" v-model="params.satisfy_money" label-width="220" label="满减金额" placeholder="例: 20"></u-field>
    <view class="plr-36 flex">
      <view class="u-flex-1">
        <view class="flex ptb-10">
          <view>
            优惠券状态
          </view>
          <view class="input ml-30 u-flex-1 ptb-15 plr-20">
            <u-radio-group v-model="params.status">
              <u-radio
                  shape="square"
                  v-for="(item, index) in couponStatus"
                  :key="index"
                  :name="item.value"
                  :disabled="item.disabled"
              >
                {{ item.name }}
              </u-radio>
            </u-radio-group>
          </view>
        </view>
      </view>
    </view>
    <u-field @click="start_show=true" class="ml-36" v-model="params.start_time" label-width="220" label="开始时间" placeholder="请选择开始时间"
             :disabled="true" right-icon="arrow-down-fill"></u-field>
    <u-field @click="end_show=true" class="ml-36" v-model="params.end_time" label-width="220" label="结束时间" placeholder="请选择结束时间"
             :disabled="true" right-icon="arrow-down-fill"></u-field>
    <view class="plr-36 flex1 flex-middle mt-40">
      <view class="radio center">
        <view class="radio-circle">

        </view>
      </view>
      <view class="size-26 ml-10">
        我已阅读并同意
        <text class="blue" @click="goDetail">《商家协议》</text>
      </view>
    </view>

    <u-button v-if="params.type==='satisfy'" class="mt-30" :disabled="!params.name || !params.num || !params.money || !params.satisfy_money || !params.start_time || !params.end_time" type="primary" @click="submit">
      发布优惠券信息
    </u-button>
    <u-button v-else class="mt-30" :disabled="!params.name || !params.num || !params.money || !params.start_time || !params.end_time" type="primary" @click="submit">
      发布优惠券信息
    </u-button>

    <!--    选择时间-->
    <u-picker v-model="start_show" mode="time" :params="timeParams" @confirm="checkedStartTime"></u-picker>
    <u-picker v-model="end_show" mode="time" :params="timeParams" @confirm="checkedEndTime"></u-picker>

  </view>
</template>

<script>

export default {
  name: "add-coupon",
  data() {
    return {
      params: {
        id: '',
        medicine_id: '',
        name: '',
        num: '',
        money: '',
        satisfy_money: '',
        start_time: '',
        end_time: '',
        status: 1,
        type: 'direct',
      },
      couponType: [{
        name: '直接优惠',
        value: 'direct',
        disabled: false
      }, {
        name: '满减优惠',
        value: 'satisfy',
        disabled: false
      }],
      couponStatus: [{
        name: '上架',
        value: 1,
        disabled: false
      }, {
        name: '下架',
        value: 0,
        disabled: false
      }],
      start_show: false,
      end_show: false,
      timeParams: {
        year: true,
        month: true,
        day: true,
        hour: true,
        minute: true,
        second: true
      },
    }
  },

  onLoad(options) {
    this.params.id = options.coupon_id
    this.params.medicine_id = options.medicine_id
    if (this.params.id){
      this.getMdeicineCouponDetail()
    }
  },
  methods: {

    // 优惠卷详情
    getMdeicineCouponDetail(){
      this.$http('/api/coupon/getMdeicineCouponDetail',{coupon_id:this.params.id},"GET").then(data=>{
        console.log(data)
        this.params.name = data.name
        this.params.type = data.type
        this.params.money = data.money
        this.params.num = data.num
        this.params.status = data.status
        this.params.start_time = data.start_time
        this.params.end_time = data.end_time
        this.params.satisfy_money = data.satisfy_money
      })
    },

    // 选择时间
    checkedStartTime(val){
      this.params.start_time = val.year +'-'+val.month+'-'+val.day+' '+val.hour+':'+val.minute+':'+val.second
    },
    checkedEndTime(val){
      this.params.end_time = val.year +'-'+val.month+'-'+val.day+' '+val.hour+':'+val.minute+':'+val.second
    },

    // 发布
    submit() {
      if (new Date(this.params.end_time) < new Date(this.params.start_time)){
        uni.showToast({
          title:'开始时间不能小于结束时间'
        })
        return
      }

      this.$http('/api/coupon/saveCoupon',this.params,"POST").then(data=>{
        uni.showToast({
          title:'发布成功'
        })
        setTimeout(()=>{
          uni.navigateBack({
            delta:1,
          })
        },1500)
      })
    },

    //合乘协议
    goDetail() {
      uni.navigateTo({
        url: '/pages/my/help/details?id=16'
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.coupon-page {
  min-height: 100vh;
  //background-color: #f8f8f8;

  /deep/ .u-primary-hover {
    background-color: $blue !important;
  }

  /deep/ .u-btn--primary--disabled {
    background-color: $bg-1 !important;
  }

  /deep/ .u-field {
    padding: 26rpx 34rpx 26rpx 0 !important;
  }

  /deep/ .u-field .u-label-text {
    font-weight: 400 !important;
  }

  .textarea {
    /deep/ .fild-body {
      margin-top: 6rpx;
    }
  }

  .input {
    input {
      font-size: 28rpx;
    }
  }

  .img {
    image {
      width: 34rpx;
      height: 34rpx;
    }
  }

  .icon {
    image {
      width: 50rpx;
      height: 50rpx;
    }
  }

  .radio {
    width: 30rpx;
    height: 30rpx;
    border-radius: 50%;
    border: 1rpx solid #999;

    .radio-circle {
      width: 22rpx;
      height: 22rpx;
      background: $blue;
      border-radius: 50%;
    }
  }

}
</style>
